<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Velo</title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/layout.css"/>
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
</head>

<body>
<div class="body-wrapper">
<div class="lf-side-bg">
</div>
<!---------------------------------top-bar---------------------------------->
<div class="top-bar cf">
    <div class="logo">
    	<a href=""><!--<span></span>--></a>
    </div>
    
    <div class="search-bar-wrap">
        <div class="search-bar">
            <div class="search">
            <form action="" method="get">
            	<input name="" type="text" class="search-places" placeholder="Search places"/>        
            	<input name="" type="button" class="search-button"/>
            </form>
            </div>
        </div>
    </div>
    
    <div class="profile">
    	<div class="self-info">
        	<a href="">
            <img src="images/profile_pic.jpg"/>
            Anthony Delmas</a>
            <a href=""><span></span></a>
        </div>
    </div>
</div>

<!---------------------------------main---------------------------------->
<div class="main cf">

<!---------------------------------lf-side---------------------------------->
    <aside class="lf-side">
        <ul class="top-ul">
            <li class="icon1">
                <a href=""></a>
            </li>
            <li class="icon2">
                <a href=""></a>
            </li>
            <li class="icon3">
                <a href=""></a>
            </li>
            <li class="icon4">
                <a href=""></a>
            </li>
        <div class="locate-bottom">
            <li class="icon5">
                <a href=""></a>
            </li>
            <li class="icon6">
                <a href=""></a>
            </li>
        </div>
        </ul>
    </aside>
    
<!---------------------------------main-pic---------------------------------->        
    <div class="pic-wrapper">       
        <article class="main-pic"> 
            <div class="main-location">
            	<span></span>
                <p>ST.PETERSBURG</p>
            </div>          
        	<!--<img src="images/image01.jpg"/>-->
            <div class="transparent">
            	<a href="">
                <div class="best-time">
                    <span class="b-t-pic"></span>
                    <div class="b-t-text">
                        <p>Best time to visit</p>
                        <p style="font-weight: 600;">MARCH</p>
                    </div>
                </div>
                </a>
                <a href="">
                <div class="flight">
                    <span class="f-pic"></span>
                    <div class="f-text">
                        <p>20 flights from</p>
                        <p style="font-weight: 600;">$350</p>
                    </div>
                </div>
                </a>
            </div>  
        </article>
    </div>

<!---------------------------------gallery---------------------------------->    
    <div class="gallery-wrap">
        <article class="gallery">
            <ul class="sub-nav cf">
                <li><a href="">Newest</a></li>
                <li><a href="">Popular</a></li>
                <li class="video fr"><a href=""><span></span></a></li>
                <li class="picture fr"><a href=""><span></span></a></li>
            </ul>
            <div class="share-wrap">
                <ul class="share cf">
                    <li>
                    <img src="images/glr_pic01.jpg"/>
                    <a href=""><span class="user-icon01"></span></a>
                        <div class="user">
                            <p class="user-name"><a href="">Cory Peterson</a></p>
                            <p class="location">Texas,USA</p>
                               
                        </div>
                        <div class="likes-wrap">
                            <a href=""><span class="likes"></span></a>225
                        </div>
                    </li>
                    <li>
                    <img src="images/glr_pic02.jpg"/>
                    <a href=""><span class="user-icon02"></span></a>
                        <div class="user">
                            <p class="user-name"><a href="">Jamie Yow</a></p>
                            <p class="location">Sydney,Australia</p>
                                
                        </div>
                        <div class="likes-wrap">
                            <a href=""><span class="likes"></span></a>4.5k
                        </div>
                    </li>
                    <li>
                    <img src="images/glr_pic03.jpg"/>
                    <a href=""><span class="user-icon03"></span></a>
                        <div class="user">
                            <p class="user-name"><a href="">Keeran Smith</a></p>
                            <p class="location">Istanbul,Turkey</p>
                                
                        </div>
                        <div class="likes-wrap">
                            <a href=""><span class="likes"></span></a>1.2k
                        </div>
                    </li>
                    <li>
                    <img src="images/glr_pic04.jpg"/>
                    <a href=""><span class="user-icon04"></span></a>
                        <div class="user">
                            <p class="user-name"><a href="">Dan Calvin</a></p>
                            <p class="location">Mlchlgan,USA</p>
                                
                        </div>
                        <div class="likes-wrap">
                            <a href=""><span class="likes"></span></a>4k
                        </div>
                    </li>
                    <li>
                    <img src="images/glr_pic05.jpg"/>
                    <a href=""><span class="user-icon05"></span></a>
                        <div class="user">
                            <p class="user-name"><a href="">Jim Timberland</a></p>
                            <p class="location">Delhl,India</p>
                               
                        </div>
                        <div class="likes-wrap">
                            <a href=""><span class="likes"></span></a>150
                        </div>
                    </li>
                    <li>
                    <img src="images/glr_pic06.jpg"/>
                    <a href=""><span class="user-icon06"></span></a>
                        <div class="user">
                            <p class="user-name"><a href="">Hoolie Morgan</a></p>
                            <p class="location">Ball,Indonesia</p>
                                
                        </div>
                        <div class="likes-wrap">
                            <a href=""><span class="likes"></span></a>22k
                        </div>
                    </li>
                </ul>
            </div>
        </article>
     </div>
     
<!---------------------------------travellers---------------------------------->
            <aside class="travellers-wrap">
            	<div class="travellers">
                     <dl>
                        <dt><strong>Recent Travellers</strong></dt>
                        <dd>
                           <a href=""> 
                           <span class="trl-pic01"></span>
                            	Jeremy Shaw</a>
                            <span class="online fr"></span>
                        </dd>
                        <dd>
                            <a href="">
                            <span class="trl-pic02"></span>
                            	Kimberly Wales</a>
                            <span class="busy fr"></span>
                        </dd>
                        <dd>
                            <a href="">
                            <span class="trl-pic05"></span>
                            	Keeri Pervose</a>
                            <span class="offline fr"></span>
                        </dd>
                        <dd>
                            <a href="">
                            <span class="trl-pic06"></span>
                            	Katy Gomes</a>
                            <span class="busy fr"></span>
                        </dd>
                        <dd>
                            <a href="">
                            <span class="trl-pic07"></span>
                            	Jeff Walton</a>
                            <span class="online fr"></span>
                        </dd>
                        <dd>
                            <a href="">
                            <span class="trl-pic08"></span>
                            	Peter John</a>
                            <span class="offline fr"></span>
                        </dd>
                     </dl>
                 </div>
                
                    <div class="chat-with">
                        <form action="" method="get">
                            <input name="" type="text" class="find-chat" placeholder="Chat with"/>         
                            <input name="" type="button" class="chat-button"/>
                        </form>
                    </div>
            </aside>
</div>
</div>

</body>
</html>
